<template>
  <div class="left-lay" :style="styles">
    <el-avatar v-if="logo" :src="logo" shape="square" :size="32" :fit="'fill'"
               class="header-logo" />
    <div v-if="title" class="page-title">{{title}}</div>
    <el-menu
        :default-active="activeIndex"
        mode="vertical"
        :ellipsis="false"
        style="flex:1; border: none; padding:0;"
        background-color="#1e222b"
        text-color="#C7C8CA"
        active-text-color="#f56c1d"
        @select="handleSelect">
      <template v-for="(item) in menus" :key="item.routePath">
        <el-menu-item :index="item.routePath" style="height: 52px;">
          <el-icon :size="16">
            <component :is="item.icon"></component>
          </el-icon>
          <template #title>
              <span>
                {{ item.name }}
              </span>
          </template>
        </el-menu-item>
      </template>
    </el-menu>

    <div class="flex-lay" />
    <div class="bottom-lay">
    </div>
  </div>
</template>

<script lang="ts" setup>

import {computed, ref} from "vue";
import router from "@/router";

interface Props {
  logo?: string,
  title?: string,
  menus?: MenuType[],
  activeMenu?: string,
  clickMenu?: any,
}

const props = defineProps<Props>();

const activeIndex = ref(props.activeMenu);
const handleSelect = (key: string) => {
  if (props.clickMenu) {
    props.clickMenu(key);
  } else if (!router.currentRoute.value.path.startsWith(key)) {
    router.push({
      path: key
    })
  }
}

const updateActiveMenu = (active: string) => {
  activeIndex.value = active;
}

const styles = computed(() => {
  return {
    "color": "white",
    "font-size": "14px",
  };
});

defineExpose({
  updateActiveMenu
})

</script>

<style scoped>
.el-menu--vertical > .el-menu-item {
  border-bottom: none;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0) !important;

  color: #ffffff;
  font-size: 13px;
  will-change: opacity,background-color;
  -webkit-transition: opacity .3s,background-color .3s;
  transition: opacity .3s,background-color .3s;
}

.el-menu--vertical > .el-menu-item.is-active {
  border-radius: 0;
  border-bottom: none;
  text-decoration: none;
  opacity: 1;
  color: #ffffff;
  background-color: #2a94ff !important;
}

.el-menu--vertical > .el-menu-item:not(.is-active):hover {
  border-radius: 0;
  border-bottom: none;
  text-decoration: none;
  opacity: 1;
  color: #2a94ff;
}

.left-lay {
  display: flex;
  flex-direction: column;
  background: #1e222b;
  align-items: center;
  height: auto;
  padding: 0;
  font-size: 13px;
}

.header-logo {
  text-align: left;
  padding-right: 16px;
}

.page-title {
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

.flex-lay {
  flex: 1;
}

</style>
